<template>
	<view class="zh-form-item">
		<view  v-if="theLabelType == 'inlie'" class="cu-form-group" >
			<view @tap="onCityClick" class="zh-picker"  >
				<view v-if="iconClass||label" class="title" :style="{'width':theLabelWidth,'text-align':theLabelAlign}">
					<text v-if="required" class="text-red " style="padding-right: 4rpx;" :style="{'font-size':theLabelFontSize}">*</text>
					<text v-if="iconClass" :class="iconClass?iconClass:''" style="padding-right: 6rpx;" :style="{'font-size':theLabelFontSize}"></text>
					<text v-if="label" :style="{'font-size':theLabelFontSize}">{{ label }}</text>
				</view>
				<view class="flex-sub" style="height: 45rpx;line-height: 45rpx;" :style="{'font-size':theFontSize,'text-align':theInputAlign}" :class="addressValue?'':'input-placeholder-class'">{{addressValue?addressValue:placeholder}}</view>
			</view>
			<view style="height: 45rpx;line-height: 45rpx;">
				<text style="padding-left: 10rpx;" :style="{'font-size':theFontSize}" class="basefont icon-close text-grey" v-if="clearFlag && addressValue&&!disabled"  @click="onClear"></text>
				<text @tap="onCityClick" style="padding-left: 10rpx;" :style="{'font-size':theFontSize}" :class="rightIconClass?rightIconClass:'text-gray'" class="basefont icon-right"></text>
			</view>
		</view>
		<view v-else class="cu-form-group-block">
			<view v-if="iconClass||label" style="display: flex;align-items:center;justify-content:flex-start;min-height:90rpx" >
				<view v-if="iconClass||label" style="padding-right: 30rpx;font-size: 28rpx;color: #333;position: relative;height: 45rpx;line-height: 45rpx;" :style="{'width':theLabelWidth,'text-align':theLabelAlign}">
					<text v-if="required" class="text-red " style="padding-right: 4rpx;" :style="{'font-size':theLabelFontSize}">*</text>
					<text v-if="iconClass" :class="iconClass?iconClass:''" style="padding-right: 6rpx;" :style="{'font-size':theLabelFontSize}"></text>
					<text v-if="label" :style="{'font-size':theLabelFontSize}">{{ label }}</text>
				</view>
			</view>
			<view class="zh-picker" >
				<view @tap="onCityClick" class="flex-sub" style="height: 45rpx;line-height: 45rpx;" :style="{'font-size':theFontSize,'text-align':theInputAlign}" :class="addressValue?'':'input-placeholder-class'">{{addressValue?addressValue:placeholder}}</view>
				<view style="height: 45rpx;line-height: 45rpx;">
					<text style="padding-left: 10rpx;" :style="{'font-size':theFontSize}" class="basefont icon-close text-grey" v-if="clearFlag && addressValue&&!disabled"  @click="onClear"></text>
					<text @tap="onCityClick" style="padding-left: 10rpx;" :style="{'font-size':theFontSize}" :class="rightIconClass?rightIconClass:'text-gray'" class="basefont icon-right"></text>
				</view>
			</view>
		</view>
		<select-address :ref='addressRef' :value="value" @confirm="onConfirm" ></select-address>
	</view>
</template>

<script>
	import {fromCheck} from '../zh-form/zh-validate.js'
	export default {
		name:"zh-form-item-address",
		props:{
			iconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			rightIconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			clearFlag: {
				type: Boolean,
				default: true
			},
			required: Boolean,
			label:String,
			// 表单字段
			prop: String,
			//字段名称 字体大小
			labelFontSize: [Number, String],
			fontSize:[Number, String],
			// block 独占一行 inlie与内容共一行
			labelType: String,
			// 左边标题的宽度单位rpx
			labelWidth: [Number, String],
			// 标题对齐方式，left|center|right
			labelAlign: String,
			// 输入框对齐方式
			inputAlign: String,
			disabled: {
				type: Boolean,
				default: false
			},
			placeholder:{
				type:String,
				default:"==请选择=="
			},
			value:{//默认值
				type:[String,Array,Number],
				default:""
			},
			current:{//是否默认显示当前时间，如果是，传的默认值将失效
				type:Boolean,
				default:false
			},
			themeColor:{//确认按钮主题颜色
				type:String,
				default:"#0081ff"
			},
			addressRef:{
				type:String,
				default:"addressSelect"
			},
			authCheck: {
				type: Boolean,
				default: null // 动态校验，即值一改变就对数据进行校验
			}
		},
		data() {
			return {
				addressValue:'',
				formField: ['labelType', 'labelWidth', 'labelAlign','inputAlign', 'fontSize','labelFontSize','msgType','form','rules','msgColor','prompt','promptType','authCheck'],
				msg: ''
			}
		},
		watch: {
			addressValue() { // 监听value 检查是否做动态校验
				if(this.authCheck||this.authCheck===null&& this.theForm.authCheck){
					this.validate()
				}
			}
		},
		computed:{
			theForm() {
				let parent = this.$parent;
				let parentName = parent.$options.name;
				while (parentName !== null && parentName !== 'ZhForm') {
				  parent = parent ? parent.$parent : null;
				  parentName = parent ? parent.$options.name : null;
				}
				let theForm = {}
				if(parent) {
					this.formField.forEach(key => {
						theForm[key] = parent[key]
					})
				}	
				return theForm;
			},
			theLabelType() {
				let labelType = this.labelType || this.theForm.labelType
				if(!labelType){
					if(this.type=='textarea'){
						labelType='block'
					}else{
						labelType='inlie'
					}
				}
				return labelType
			},
			theLabelWidth() {
				let width  = this.labelWidth || this.theForm.labelWidth
				if(!isNaN(Number(width))) {
					width += 'rpx'
				}
				return width
			},
			theLabelAlign(){
				let labelAlign = this.labelAlign || this.theForm.labelAlign
				if(!labelAlign){
					labelAlign='right'
				}
				return labelAlign
			},
			theInputAlign(){
				let inputAlign = this.inputAlign || this.theForm.inputAlign
				if(!inputAlign){
					inputAlign='right'
				}
				return inputAlign
			},
			theFontSize(){
				let fontSize = this.fontSize || this.theForm.fontSize
				if(!fontSize){
					fontSize='28rpx'
				}else{
					if(!isNaN(Number(fontSize))) {
						fontSize += 'rpx'
					}
				}
				return fontSize
			},
			theLabelFontSize(){
				let labelFontSize = this.labelFontSize || this.theForm.labelFontSize||this.fontSize || this.theForm.fontSize
				if(!labelFontSize){
					labelFontSize='28rpx'
				}else{
					if(!isNaN(Number(labelFontSize))) {
						labelFontSize += 'rpx'
					}
				}
				return labelFontSize
			}
		},
		methods: {
			onCityClick(){
				if(!this.disabled){
					this.$refs.addressSelect.show();
				}
			},
			onClear(){
				const data={}
				data.province={}
				data.city={}
				data.county={}
				data.town={}
				this.addressValue = ''
				this.$emit('addressChange', data);
				this.$refs[this.addressRef].onRankClick(0)
			},
			onConfirm(data){
				console.log(data)
				this.$emit('addressChange', data);
				if(data){
					let address=data.province.label
					if(data.city.label){
						address = address+"-"+data.city.label
					}
					if(data.county.label){
						address = address+"-"+data.county.label
					}
					if(data.town.label){
						address = address+"-"+data.town.label
					}
					this.addressValue = address
				}else{
					this.addressValue = ''
				}
			},
			// 规则校验
			validate() {
				if(this.required&& (this.value == null || this.value == '')){
					// 是否必填
					this.msg = this.label + '不能为空'
				}else{
					if(!this.theForm.rules) return
					let rule = this.theForm.rules[this.prop]
					this.msg = ''
					if(rule) {
						if(rule.required && (this.value == null || this.value == '')) {
							// 是否必填
							this.msg = rule.msg || this.label + '不能为空'
						}else if(rule.validator) {
							// 自定义规则校验函数
							let bol = rule.validator(this.value,rule)
							if(typeof bol == 'string') {
								this.msg = bol
							}else if(!bol) {
								this.msg = rule.message || this.label + '不符合规则'
							}
						}else if(rule.rule && this.value != null && this.value != '') {
							// 默认校验规则
							let result = fromCheck(this.value, rule.rule, this.theForm.form)
							if(result !== true) {
								this.msg = this.label + result.msg
								if(rule.message) {
									if(typeof rule.message === 'string') {
										this.msg = rule.message
									} else if(rule.message[result.rule]) {
										this.msg = rule.message[result.rule]
									}
								}
							}
						}
					}
				}
				if(this.msg != '') {
					if(this.theForm.msgType == 'out') {
						// 弹框
						uni.showModal({ content: this.msg,showCancel:false})
					}else if(this.theForm.msgType == 'msg'){
						// 消息框
						uni.showToast({
							icon: 'none',
							title: this.msg,
						})
					}
				}
				return !this.msg
			}
		}
	}
</script>

<style lang="scss">
	.input-placeholder-class {
		color: $uni-text-color-placeholder;
	}
	.zh-form-item {
		border-bottom: 1rpx solid #eee;
	}
</style>
